HTML Links – einfach erklärt

1. So sieht ein Link aus

Ein Link hat immer diese Teile:

<a href="ziel">Linktext</a>

<a> – Start
href="ziel" – Wohin?
Linktext – Was einem auf der Website angezeigt wird
</a> – Ende

2. Wichtige Attribute für Links

href – Wohin geht der Link?

Das ist das Ziel (Webseite, Datei, E-Mail usw.)

<a href="https://google.com">Google öffnen</a>

Beispiel: Google öffnen

target="_blank" – Neuer Tab/Fenster

Der Link öffnet sich durch den Befehl in einem neuen Tab.

<a href="https://example.com" target="_blank">Wikipedia (Neuer Tab)</a>

Beispiel: Wikipedia (Neuer Tab)

download – Datei direkt öffnen

Die Datei wird geöffnet

<a href="bild.jpg" download>PDF herunterladen</a>

Beispiel: PDF öffnen

E-Mail im Browser öffnen

Der Webmail-Dienst wird direkt im Browser geöffnet und eine neue Nachricht vorbereitet wenn man angemeldet ist

<a href="https://mail.google.com/mail/u/0/?fs=1&to=info@beispiel.de&su=Anfrage&body=Hallo...
" target="_blank">Bei Gmail schreiben</a>

Gmail öffnen und schreiben

Bild in neuem Tab öffnen

Das Bild wird nicht im selben, sondern in einem neuen Tab geöffnet.

<a href="Bild.jpg" target="_blank">Bild in neuem Tab öffnen</a>

Beispiel: Bild in neuem Tab öffnen

title – Tooltip beim Drüberfahren

Zeigt einen kleinen Hinweis an, wenn man mit der Maus drüberfährt.

<a href="seite.html" title="Gehe zur nächsten Seite">Weiter</a>

Beispiel: Drüberfahren → Tooltip

3. CSS – So wird der Link schön

Hier ist die Erklärung wie man links mithilfe von css schön macht.
Schritt für Schritt erklärt, sodass man es direkt selber anwenden kann (für genau erklärung siehe Luca):

Alle Links sind blau und nicht unterstrichen

 a {
  color: blue;
  text-decoration: none;
}

 a:hover {
  color: red;
  text-decoration: underline;
}

Beim Drüberfahren wird der Link rot und unterstrichen.

Nach oben